import React from 'react';
import { Button } from 'antd';
export default class ProxyDemo extends React.Component{
  constructor(){
    super();
    // 跨域https://yunp.top/blog/index.php/2016/05/12/44/
    // http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0
    /**
     * 跨域解决方案
     *  开发模式下：
     *    利用环境解决：react、vue常用框架
     *  生产模式下：
     *    jsonp、cors、iframe、postMessage...
    */
    this.state = {
      msg: "hello!",
      data: []
    }
  }
  fetchHandle = () => {
    // packge.json中已配置跨域http://tingapi.ting.baidu.com，请求地址不需要域名
    // fetch("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0")
    fetch("/v1/restserver/ting?method=baidu.ting.billboard.billList&type=1&size=10&offset=0")
    .then(res => res.json())
    .then(data => {
      console.log(data)
    })
    .catch(error => {
      console.log(new Error(error));
    })
  }
  // nodeHandle = () => {
  //   // z在src/setupProxy中已配置跨域
  //   // fetch("http://localhost:3100/api/list")
  //   fetch("/api/list")
  //   .then(res => res.json())
  //   .then(data => {
  //     console.log(data);
  //   })
  // }
  render(){
    const {
      msg
    } = this.state
    return(
      <div>
        <Button onClick={this.fetchHandle}>请求百度音乐接口</Button>
        {/* <Button onClick={this.nodeHandle}>跨域请求本地node接口</Button> */}
        { msg }
      </div>
    )
  }
}